<template>
  <div class="app-container customer-div">

      <el-tabs v-model="activeName" @tab-click="changeActiveName" >
        <el-tab-pane label="待我处理" name="3">
          <div style="margin-top: 40px">
            <!--搜索-->
            <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
              <el-form-item label="单据类型：">
                <el-select v-model="listQuery.billType" filterable placeholder="请选择" clearable>
                  <el-option :value="0" label="发货单" :key="0">发货单</el-option>
                  <el-option :value="1" label="入库单" :key="1">入库单</el-option>
                  <el-option :value="2" label="其它单据" :key="2">其它单据</el-option>
                  <el-option :value="3" label="采购发货单" :key="3">采购发货单</el-option>
                  <el-option :value="4" label="外贸发货单" :key="4">外贸发货单</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关键字：">
                <el-input v-model="listQuery.keywords" placeholder="结算单号/收款方"></el-input>
              </el-form-item>
              <el-form-item label="创建日期：">
                <el-date-picker
                        :default-time="['00:00:00', '23:59:59']"
                        v-model="listQuery.createdAt"
                        type="daterange"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="状态：">
                <el-select v-model="listQuery.settlementState" filterable placeholder="请选择" clearable>
                  <el-option :value="item.key" :label="item.name" :key="item.name" v-for="item in stateList"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                        @click="handleSearchList()"
                        type="primary">
                  查询
                </el-button>
                <!--                    <el-button-->
                <!--                            @click="toAddSettlement()"-->
                <!--                            type="primary">-->
                <!--                      新增-->
                <!--                    </el-button>-->
              </el-form-item>
            </el-form>
          </div>
          <!--数据列表 发货单-->
          <div class="table-container">
            <el-table
                    v-loading="listLoading"
                    :data="tableData"
                    border
                    style="width: 100%; margin-top: 20px">
              <el-table-column
                      align="center"
                      label="结算单号"
                      width="150">
                <template slot-scope="scope">
                  {{scope.row.settlementNo}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="收款方"
                      width="150">
                <template slot-scope="scope">
                  {{scope.row.receivingCustomerName}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="单据类型"
                      width="100">
                <template slot-scope="scope">
                  {{scope.row.billType  | fiferType}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="单据数量"
                      width="100">
                <template slot-scope="scope">
                  {{scope.row.deliverIdsNum}}
                </template>
              </el-table-column>
              <el-table-column
                      label="运费结算金额"
                      width="120"
                      align="center">
                <template slot-scope="scope">
                  {{scope.row.sumAmount}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      prop="settlementAmount"
                      label="实际结算金额"
                      width="120">
              </el-table-column>
              <el-table-column
                      label="付款方式"
                      width="100"
                      align="center">
                <template slot-scope="scope">
                  {{scope.row.payType | fiferPayState}}
                </template>
              </el-table-column>
              <el-table-column
                      min-width="300"
                      label="备注">
                <template slot-scope="scope">
                  {{scope.row.remark}}
                </template>
              </el-table-column>
              <el-table-column
                      label="添加日期"
                      width="150"
                      align="center">
                <template slot-scope="scope">
                  {{scope.row.createdAt}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="操作人"
                      width="100">
                <template slot-scope="scope">
                  {{scope.row.username}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="付款日期"
                      width="100">
                <template slot-scope="scope">
                  {{scope.row.payDate}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="付款人"
                      width="100">
                <template slot-scope="scope">
                  {{scope.row.payUsername}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="状态"
                      width="100">
                <template slot-scope="scope">
                  {{scope.row.deliverStateStr}}
                </template>
              </el-table-column>
              <el-table-column
                      fixed="right"
                      label="操作"
                      align="center">
                <template slot-scope="scope">
                  <el-button
                          type="text"
                          size="mini"
                          @click="toInfo(scope.row)">查看
                  </el-button>
                  <el-button
                          v-if="scope.row.settlementState == 40"
                          type="text"
                          size="mini"
                          @click="showSendForm(scope.row)">付款
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="listQuery.pageNum"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[10,15,20]"
                    :total="count">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="全部结算单" name="1">
            <div style="margin-top: 40px">
                <!--搜索-->
                <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
                  <el-form-item label="单据类型：">
                    <el-select v-model="listQuery.billType" filterable placeholder="请选择" clearable>
                      <el-option :value="0" label="发货单" :key="0">发货单</el-option>
                      <el-option :value="1" label="入库单" :key="1">入库单</el-option>
                      <el-option :value="2" label="其它单据" :key="2">其它单据</el-option>
                      <el-option :value="3" label="采购发货单" :key="3">采购发货单</el-option>
                      <el-option :value="4" label="外贸发货单" :key="4">外贸发货单</el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="关键字：">
                    <el-input v-model="listQuery.keywords" placeholder="结算单号/收款方"></el-input>
                  </el-form-item>
                  <el-form-item label="创建日期：">
                    <el-date-picker
                            :default-time="['00:00:00', '23:59:59']"
                            v-model="listQuery.createdAt"
                            type="daterange"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="状态：">
                    <el-select v-model="listQuery.settlementState" filterable placeholder="请选择" clearable>
                      <el-option :value="item.key" :label="item.name" :key="item.name" v-for="item in stateList"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                            @click="handleSearchList()"
                            type="primary">
                      查询
                    </el-button>
                    <el-button
                      :loading="btnloading2"
                      @click="downloadExcel2"
                      type="primary">
                      导出
                    </el-button>
<!--                    <el-button-->
<!--                            @click="toAddSettlement()"-->
<!--                            type="primary">-->
<!--                      新增-->
<!--                    </el-button>-->
                  </el-form-item>
            </el-form>
            </div>
            <!--数据列表 发货单-->
            <div class="table-container">
              <el-table
                      v-loading="listLoading"
                      :data="tableData"
                      border
                      style="width: 100%; margin-top: 20px">
                <el-table-column
                        align="center"
                        label="结算单号"
                        width="150">
                  <template slot-scope="scope">
                    {{scope.row.settlementNo}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="收款方"
                        width="150">
                  <template slot-scope="scope">
                    {{scope.row.receivingCustomerName}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="单据类型"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.billType | fiferType}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="单据数量"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.deliverIdsNum}}
                  </template>
                </el-table-column>
                <el-table-column
                        label="运费结算金额"
                        width="120"
                        align="center">
                  <template slot-scope="scope">
                    {{scope.row.sumAmount}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="settlementAmount"
                        label="实际结算金额"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="付款方式"
                        width="100"
                        align="center">
                  <template slot-scope="scope">
                    {{scope.row.payType | fiferPayState}}
                  </template>
                </el-table-column>
                <el-table-column
                        min-width="300"
                        label="备注">
                  <template slot-scope="scope">
                    {{scope.row.remark}}
                  </template>
                </el-table-column>
                <el-table-column
                        label="添加日期"
                        width="150"
                        align="center">
                  <template slot-scope="scope">
                    {{scope.row.createdAt}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作人"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.username}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="付款日期"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.payDate}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="付款人"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.payUsername}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="状态"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.deliverStateStr}}
                  </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center">
                  <template slot-scope="scope">
                    <el-button
                            type="text"
                            size="mini"
                            @click="toInfo(scope.row)">查看
                    </el-button>
                    <el-button
                            v-if="scope.row.settlementState == 40"
                            type="text"
                            size="mini"
                            @click="showSendForm(scope.row)">付款
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pagination-container">
              <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      layout="total, sizes,prev, pager, next,jumper"
                      :current-page.sync="listQuery.pageNum"
                      :page-size="listQuery.pageSize"
                      :page-sizes="[10,15,20]"
                      :total="count">
              </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="结算明细" name="2">
          <!--数据列表-->
          <div class="table-container">
            <el-radio-group v-model="listQuery2.billType" @change="changeBillType" size="mini">
              <el-radio-button :label="0">发货单</el-radio-button>
              <el-radio-button :label="1">入库单</el-radio-button>
              <el-radio-button :label="2">其它入库单</el-radio-button>
              <el-radio-button :label="3">采购发货单</el-radio-button>
              <el-radio-button :label="4">外贸发货单</el-radio-button>
            </el-radio-group>

            <el-form :inline="true" :model="listQuery2" size="mini" label-width="100px" style="margin-top:40px">
              <el-form-item label="结算单号：" v-if="listQuery2.billType == 0 || listQuery2.billType == 3 || listQuery2.billType == 4">
                <el-input v-model="listQuery2.settlementNo" ></el-input>
              </el-form-item>
              <el-form-item label="单据编号：">
                <el-input v-model="listQuery2.deliverSn" ></el-input>
              </el-form-item>
              <el-form-item label="收款方：">
                <el-input v-model="listQuery2.receivingCustomerName" ></el-input>
              </el-form-item>
              <el-form-item label="是否作废：" v-if="listQuery2.billType == 0 || listQuery2.billType == 3 || listQuery2.billType == 4">
                <el-select v-model="listQuery2.isDelete" filterable placeholder="请选择" clearable>
                  <el-option :value="1" label="是" :key="1"></el-option>
                  <el-option :value="0" label="否" :key="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="结算时间：" v-if="listQuery2.billType == 0 || listQuery2.billType == 3 || listQuery2.billType == 4">
                <el-date-picker
                        :default-time="['00:00:00', '23:59:59']"
                        v-model="listQuery2.settlementDate"
                        type="daterange"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                        @click="handleSearchList2()"
                        type="primary">
                  查询
                </el-button>
                <el-button
                        v-if="freightSettlementExport"
                        @click="downloadExcel()"
                        type="primary">
                  导出
                </el-button>
              </el-form-item>
            </el-form>
            <!--数据列表 发库单-->
            <el-table
                    v-if="listQuery2.billType == 0 || listQuery2.billType == 3 || listQuery2.billType == 4"
                    v-loading="listLoading2"
                    :data="tableData2"
                    border
                    style="width: 100%; margin-top: 20px">
              <el-table-column
                      align="center"
                      label="结算单号"
                      width="150">
                <template slot-scope="scope">
                  {{scope.row.settlementNo}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="收款方"
                      width="300">
                <template slot-scope="scope">
                  {{scope.row.receivingCustomerName}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="发货单号"
                      width="150">
                <template slot-scope="scope">
                  {{scope.row.deliverSn}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="合同单号"
                      width="150">
                <template slot-scope="scope">
                  {{scope.row.orderSn}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="客户名称"
                      width="300">
                <template slot-scope="scope">
                  {{scope.row.customerName}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="商品信息"
                      width="150">
                <template slot-scope="scope">
                  {{scope.row.goodsNames}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="发货数量"
                      width="100">
                <template slot-scope="scope">
                  {{scope.row.shipNum}}
                </template>
              </el-table-column>
              <el-table-column
                      label="运费"
                      width="100"
                      align="center">
                <template slot-scope="scope">
                  {{scope.row.freight}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      prop="driverExpress"
                      label="司机运费"
                      width="100">
              </el-table-column>
              <el-table-column
                      label="发货单状态"
                      width="100"
                      align="center">
                <template slot-scope="scope">
                  {{scope.row.deliverState}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      width="100"
                      label="业务员">
                <template slot-scope="scope">
                  {{scope.row.userRealName}}
                </template>
              </el-table-column>
              <el-table-column
                      label="是否结算"
                      width="100"
                      align="center">
                <template slot-scope="scope">
                  {{scope.row.settlementState}}
                </template>
              </el-table-column>
              <el-table-column
                      align="center"
                      label="结算时间"
                      width="150">
                <template slot-scope="scope">
                  {{scope.row.settlementDate}}
                </template>
              </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                v-if="scope.row.deliverState == '作废'"
                                type="text"
                                size="mini"
                                @click="showChangeForm(scope.row)">结算转移
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--数据列表 入库单-->
            <el-table
                      v-if="listQuery2.billType == 1"
                      v-loading="listLoading2"
                      :data="tableData2"
                      border
                      style="width: 100%; margin-top: 20px">
                <el-table-column
                        align="center"
                        label="单据类型"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.billType }}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="入库单号"
                        width="150">
                  <template slot-scope="scope">
                    {{scope.row.entrySn}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="入库日期"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.entryTime}}
                  </template>
                </el-table-column>
                <el-table-column
                        label="供应商名称"
                        width="300"
                        align="center">
                  <template slot-scope="scope">
                    {{scope.row.supplierName}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="fromCompany"
                        label="合同公司"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="数量"
                        width="100"
                        align="center">
                  <template slot-scope="scope">
                    {{scope.row.goodsNum}}
                  </template>
                </el-table-column>
                <el-table-column
                        width="100"
                        align="center"
                        label="业务员">
                  <template slot-scope="scope">
                    {{scope.row.userName}}
                  </template>
                </el-table-column>
                <el-table-column
                        label="运费"
                        width="100"
                        align="center">
                  <template slot-scope="scope">
                    {{scope.row.freight}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="司机运费"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.driverFreight}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="收款人"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.payeeUsername}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="费用凭证"
                        width="300">
                  <template slot-scope="scope">
                    <img :src="item" v-for="item in scope.row.costVoucher" style="width:80px;height:80px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="报销状态"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.isFreightSettled}}
                  </template>
                </el-table-column>
              </el-table>

            <!--数据列表 其它单据-->
            <el-table
                      v-if="listQuery2.billType == 2"
                      v-loading="listLoading2"
                      :data="tableData2"
                      border
                      style="width: 100%; margin-top: 20px">
                <el-table-column
                        align="center"
                        label="单据类型"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.billType }}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="单据编号"
                        width="150">
                  <template slot-scope="scope">
                    {{scope.row.entrySn}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="日期"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.entryTime}}
                  </template>
                </el-table-column>
                <el-table-column
                        label="供应商"
                        width="300"
                        align="center">
                  <template slot-scope="scope">
                    {{scope.row.supplierName}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="entryType"
                        label="出库类别"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="运费"
                        width="100"
                        align="center">
                  <template slot-scope="scope">
                    {{scope.row.freight}}
                  </template>
                </el-table-column>
                <el-table-column
                        width="100"
                        align="center"
                        label="司机运费">
                  <template slot-scope="scope">
                    {{scope.row.driverFreight}}
                  </template>
                </el-table-column>
                <el-table-column
                        label="收款人"
                        width="150"
                        align="center">
                  <template slot-scope="scope">
                    {{scope.row.payeeUsername}}
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="费用凭证"
                        width="300">
                  <template slot-scope="scope">
                    <img :src="item" v-for="item in scope.row.costVoucher" style="width:80px;height:80px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                  </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="报销状态"
                        width="100">
                  <template slot-scope="scope">
                    {{scope.row.isFreightSettled}}
                  </template>
                </el-table-column>
              </el-table>

          </div>
          <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="listQuery2.pageNum"
                    :page-size="listQuery2.pageSize"
                    :page-sizes="[10,15,20]"
                    :total="count2">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>

    <!--付款-->
    <el-dialog
            :close-on-click-modal="false"
            :beforeClose="handleClose2"
            title="确认付款"
            :visible.sync="dialogVisible2"
            width="500px">
      <el-form :model="sendForm" size="mini" label-width="120px" ref="sendForm" :rules="rules2">
        <el-form-item label="付款日期：" prop="payDate">
          <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="sendForm.payDate"
                  style="width:140px"
                  type="date"
                  placeholder="付款日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上传凭证：" prop="filesSrc">
          <div style="width: 100%;height: 150px; border:1px solid #DCDFE6;cursor: default;border-radius: 4px;">
            <img id="imgNode" :src="sendForm.filesSrc" style="width:100%;height:100%;object-fit: contain;border:0" v-show="sendForm.filesSrc">
            <el-input type="hidden" v-model="sendForm.filesSrc"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="备注信息：">
          <el-input type="textarea" v-model="sendForm.payRemark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
    </el-dialog>

      <!--结算转移-->
      <el-dialog
              :close-on-click-modal="false"
              :beforeClose="handleClose3"
              title="结算转移"
              :visible.sync="dialogVisible3"
              width="500px">
          <el-form :model="changeForm" size="mini" label-width="120px" ref="changeForm" :rules="rules3">
              <el-form-item label="原发货单号：">
                  {{changeForm.deliverSn}}
              </el-form-item>
              <el-form-item label="新发货单号：" prop="newDeliverSn">
                  <el-input  v-model="changeForm.newDeliverSn"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose3">取 消</el-button>
          <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
      </span>
      </el-dialog>


    <!--放大图片-->
    <el-dialog
            :visible.sync="dialogVisible4"
            width="800px">
      <img :src="fullSrc" style="width:100%;"/>
    </el-dialog>

  </div>
</template>
<script>
    import {settlementPay,freightSettlement,getQiniuToken,settlementDetailList,settlementExportDetailList,settlementMove,uploadBase64,settlementProcess} from '@/api/partner'
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultListQuery={
      keywords:'',
      createdAt:null,
      pageNum: 1,
      pageSize: 10,
      settlementState:null,
      billType:null,
      tab : 'waitMyCheck'
    };
    const defaultListQuery2={
      settlementNo:'',
      receivingCustomerName:null,
      settlementDate:null,
      deliverSn:null,
      isDelete:'',
      pageNum: 1,
      pageSize: 10,
      billType:0,
    };
    const defaultPriceForm={
      orderId:'',
      payAccount : '',
      payType:'银行汇款',
      payAmount:'',
      payContent:'',
      remark:'',
      unPaidAmount:''
    };
  const defaultSendForm={
    settlementId: '',
    files: [],
    payRemark: '',
    payDate:'',
    filesSrc:null,
  };
    export default {
      name: "index",
      data(){
          return {
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData: [],
              count: 0,
              listLoading: false,
              userOptionList:[],
              roles:store.getters.roles ? store.getters.roles : [],
              dialogVisible2:false,
              priceForm:JSON.parse(JSON.stringify(defaultPriceForm)),
              btnLoading: false,
              btnLoading2:false,
              sendForm:JSON.parse(JSON.stringify(defaultSendForm)),
              uploadToken:{
                token:'',
              },
              imgDomain:'',
            rules2:{
              payDate:[{required: true, trigger: 'blur' ,message: '请输入付款日期',}],
              filesSrc:[{required: true, trigger: 'change' ,message: '请上传付款凭证',}],
            },
            activeName:'3',
            listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
            tableData2: [],
            count2: 0,
            listLoading2: false,
            dialogVisible3:false,
              rules3:{
                  newDeliverSn:[{required: true, trigger: 'blur' ,message: '请输入新发货单号',}],
              },
              btnLoading3:false,
              changeForm:{
                  settlementId:'',
                  deliverSn:'',
                  oldDeliverId:'',
                  newDeliverSn:'',
              },
              upUrl:'',
              dialogVisible4:false,
              fullSrc:'',
              stateList:[
                {key:0,name:'待申请人确认'},
                {key:10,name:'已作废'},
                {key:20,name:'待财务确认'},
                {key:30,name:'待总经理审核'},
                {key:40,name:'待支付'},
                {key:50,name:'已支付'},
              ],
              btnloading2:false

          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),
        isCanCustomerByAll(){
          if(this.roles.indexOf("customerByAll") != -1){
            return true
          }else{
            return false
          }
        },
        freightSettlementExport(){
          if(this.roles.indexOf("freightSettlementExport") != -1){
            return true
          }else{
            return false
          }
        },
      },
      created() {
        this.getList();
        this.getList2();
        this.getUploadToken();
        this.pasteImage();
      },
      filters: {
        fiferPayState(val){
          if(val == 1){
            return '银行汇款'
          }else if(val == 2){
            return '现金'
          }else if(val == 3){
            return '支付宝'
          }else if(val == 4){
            return '微信'
          }
        },
        fiferType(val){
          if(val == 0){
            return '发货单'
          }else if(val == 1){
            return '入库单'
          }else if(val == 2){
            return '其它单据'
          }else if(val == 3){
            return '采购发货单'
          }else if(val == 4){
            return '外贸发货单'
          }
        },
      },
      watch:{
        upUrl(){
          let data = {};
          let pic = this.upUrl.replace(/^.*?base64,/, '');
          data.pic = pic;
          data.token = this.uploadToken.token;
          data.imgDomain = this.imgDomain;
          uploadBase64(data).then((res)=>{
            if(res.src){
              this.sendForm.filesSrc = res.src;
            }else{
              this.$message.error('上传失败')
            }
          });
        },
      },
      methods:{

        changeBillType(){
          if(this.listQuery2.billType != 0 && this.listQuery2.billType != 3  && this.listQuery2.billType != 4 ){
            this.listQuery2.settlementNo = '';
            this.listQuery2.settlementDate = null;
            this.listQuery2.isDelete = '';
          }
          this.handleSearchList2();
        },
        fullImg(src){
          this.dialogVisible4 = true;
          this.fullSrc = src;
        },
        //粘贴图片
        pasteImage() {
          let upUrl = ''
          document.addEventListener('paste',(event)=> {
            let isChrome = false;
            if (event.clipboardData || event.originalEvent) {
              //某些chrome版本使用的是event.originalEvent
              let clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
              if(clipboardData.items){
                // for chrome
                let  items = clipboardData.items, len = items.length, blob = null;
                isChrome = true;
                for (let i = 0; i < len; i++) {
                  if (items[i].type.indexOf("image") !== -1) {
                    //getAsFile() 此方法只是living standard firefox ie11 并不支持
                    blob = items[i].getAsFile();
                  }
                }
                if(blob!==null){
                  let blobUrl=URL.createObjectURL(blob);
                  // this.priceForm.blobImg = blobUrl;
                  // document.getElementById("imgNode").src=blobUrl;
                  let reader = new FileReader();
                  // base64码显示

                  reader.onload =  (event)=> {
                    // event.target.result 即为图片的Base64编码字符串
                    // this.priceForm.payContent = event.target.result;
                    // document.getElementById("imgNode").src=base64_str;
                    this.upUrl = event.target.result;
                  };
                  reader.readAsDataURL(blob);
                }
              }
            }
          });
        },
          //显示结算转移
          showChangeForm(item){
              this.changeForm.settlementId = JSON.parse(JSON.stringify(item.settlementId));
              this.changeForm.deliverSn = JSON.parse(JSON.stringify(item.deliverSn));
              this.changeForm.oldDeliverId = JSON.parse(JSON.stringify(item.deliverId));
              this.changeForm.newDeliverSn = '';
              this.dialogVisible3 = true;
          },

          //关闭结算转移
          handleClose3(){
              this.dialogVisible3 = false;
              this.$refs.changeForm.clearValidate();
          },

          //提交结算转移
          handleConfirm3(){
              this.$refs.changeForm.validate((valid) => {
                  if (valid) {
                      this.btnLoading3 = true;
                      let data = JSON.parse(JSON.stringify(this.changeForm));
                      settlementMove(data).then(()=>{
                          this.btnLoading3 = false;
                          this.handleClose3();
                          this.getList2();
                      }).catch(()=>{
                          this.btnLoading3 = false;
                      })
                  }
              })
          },
        //下载excle
        downloadExcel(){
          let params = JSON.parse(JSON.stringify(this.listQuery2));
          params.source = 'finance';
          settlementExportDetailList(params).then((res)=>{
            require.ensure([], () => {
              const { export_json_to_excel } = require('sheet/Export2Excel');
              const tHeader = res.title;
              const filterVal = res.columns;
              const list = res.list;
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, res.fileName);
            })
          })
        },
        downloadExcel2(){
          this.btnloading2 = true
          let params = JSON.parse(JSON.stringify(this.listQuery));
          params.export = 1;
          delete params.pageSize;
          delete params.pageNum
          freightSettlement(params).then((res)=>{
            this.btnloading2 = false
            require.ensure([], () => {
              const { export_json_to_excel } = require('sheet/Export2Excel');
              const tHeader = res.title;
              const filterVal = res.columns;
              const list = res.list;
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, res.fileName);
            })
          }).catch(()=>{})
        },

        //下载表格数据格式化
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        },
        //切换tab
        changeActiveName(tab, event){
           if(tab.name == '3'){
              this.listQuery.tab = 'waitMyCheck';
              this.handleSearchList()
           }else if(  tab.name == '1'){
             this.listQuery.tab = 'all';
             this.handleSearchList()
           }
        },
        //获取七牛TOKEN
        getUploadToken(){
          return getQiniuToken().then((res)=>{
            this.uploadToken.token = res.token;
            this.imgDomain = res.domain
          })
        },
        changeGoodsReceiptSrc(){
          this.sendForm.filesSrc = this.sendForm.files.join(",")
        },
        //上传图片
        handleAvatarSuccess(res){
          this.sendForm.files.push(this.imgDomain+res.key);
          this.changeGoodsReceiptSrc();
        },

        //删除图片
        delImg(index){
          this.sendForm.goodsReceipt.splice(index,1)
          this.changeGoodsReceiptSrc();
        },

        //显示收款
        showSendForm(item){
          this.getUploadToken().then(()=>{
            this.sendForm.files = JSON.parse(JSON.stringify(item.files));
            this.sendForm.filesSrc = null;
            this.sendForm.payRemark = JSON.parse(JSON.stringify(item.payRemark));
            this.sendForm.payDate = JSON.parse(JSON.stringify(item.payDate));
            this.sendForm.settlementId = item.settlementId;
            this.dialogVisible2 = true;
            console.log(this.sendForm)
          })

        },

        //关闭收货
        handleClose2(){
          this.dialogVisible2 = false;
          this.$refs.sendForm.clearValidate();
        },

        //提交收货信息
        handleConfirm2(){
          this.$refs.sendForm.validate((valid) => {
            if (valid) {
              this.btnLoading2 = true;
              let data = JSON.parse(JSON.stringify(this.sendForm));
              data.files = [];
              data.files.push(data.filesSrc)
              settlementPay(data).then(()=>{
                this.btnLoading2 = false;
                this.handleClose2();
                this.getList();
              }).catch(()=>{
                this.btnLoading2 = false;
              })
            }
          })
        },

        //去新增运费结算单页
        toAddSettlement(){
          let routeData = this.$router.resolve({name:'addSettlement'});
          window.open(routeData.href);
        },

        //去查看页
        toInfo(item){
          let routeData = this.$router.resolve({name:'settlementInfo',query:{id:item.settlementId}});
          window.open(routeData.href);
        },

        handleSizeChange(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList();
        },
        handleCurrentChange(val){
          this.listQuery.pageNum = val;
          this.getList();
        },

        handleSearchList(){
          this.listQuery.pageNum = 1;
          this.getList();
        },

        //获取订单列表
        getList() {
          this.listLoading = true;
          freightSettlement(this.listQuery).then(response => {
            this.tableData = response.list;
            this.count = response.count;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          });
        },

        handleSizeChange2(val){
          this.listQuery2.pageNum = 1;
          this.listQuery2.pageSize = val;
          this.getList2();
        },
        handleCurrentChange2(val){
          this.listQuery2.pageNum = val;
          this.getList2();
        },

        handleSearchList2(){
          console.log("789846")
          this.listQuery2.pageNum = 1;
          this.getList2();
        },

        //获取结算单明细列表
        getList2() {
          this.listLoading2 = true;
          settlementDetailList(this.listQuery2).then(response => {
            this.tableData2 = response.list;
            if(this.listQuery2.billType != 0 && this.listQuery2.billType != 3  && this.listQuery2.billType != 4){
              this.tableData2.forEach((el)=>{
                el.costVoucher = el.costVoucher != '' ? el.costVoucher.split(",") : [];
              })
            }
            this.count2 = response.count;
            this.listLoading2 = false;
          }).catch(()=>{
            this.listLoading2 = false;
          });
        },
      },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
